<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>官方网站首页设置</legend>
        </fieldset>
        <div lay-filter="form">
            <div class="layui-form-item">
                <label class="layui-form-label">顶部banner</label>
                <div class="layui-input-inline">
                    <input type="text"  autocomplete="off" class="layui-input" placeholder="请输入图片地址"
                           v-model="wapTopBanner"
                           style="width:500px;" v-on:blur="setNameVal($event,'wapTopBanner')"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">首页背景</label>
                <div class="layui-input-inline">
                    <input type="text"  autocomplete="off" class="layui-input" placeholder="请输入图片地址"
                           v-model="wapBackground"
                           style="width:500px;" v-on:blur="setNameVal($event,'wapBackground')"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">首页3D轮播图</label>
                <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="screenShow=!screenShow" style="margin-right:20px;">
                    <i class="fa" :class="screenShow?'fa-caret-down':'fa-caret-up'"></i> {{screenShow?'折叠':'展开'}}
                </button>
                <span v-show="screenShow">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="lunbo1Add()"><i class="fa fa-plus"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="lunbo1Save()"><i class="fa fa-floppy-o"></i>保存</button>
                </span>
                <div class="layui-input-block">
                    <div class="layui-clear lunbo1-list" v-show="screenShow">
                        <div class="left item" v-for="(item,index) in wapScreenImages">
                            <p><button class="layui-btn layui-btn-sm" v-on:click="lunbo1Upload(index)">上传图片</button></p>
                            <p>
                                <a :href="buildFullUrl(item.src)" target="_blank"><img :src="buildFullUrl(item.src)" /></a>
                            </p>
                            <i class="fa fa-trash icon cursor" v-on:click="lunbo1.splice(index,1)"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">二维码大背景</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm" id="upload-qr-bg">上传图片</button>
                    <div class="img-box" style="width:200px;margin-top:10px;">
                        <img class="img" :src="wapQrcodeBg" alt="">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">二维码列表</label>
                <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="qrCodesAdd()"><i class="fa fa-plus"></i>添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-warm" @click="wapQrCodeSave()"><i class="fa fa-floppy-o"></i>保存</button>
                <div class="layui-input-block block-bottom layui-clear">
                    <div class="item left" v-for="(item,index) in wapQrCodes">
                        <i class="fa fa-trash icon cursor del" @click="wapQrCodes.splice(index,1)"></i>
                        <div class="layui-clear" style="margin-top: 10px;">
                            <div class="layui-input-inline"><input type="text" class="layui-input" placeholder="标题" v-model="item.title"></div>
                        </div>
                        <div class="layui-clear" style="margin-top:10px;">
                            <div class="left front-image image">
                                <button class="layui-btn layui-btn-primary" v-on:click="uploadQrImg(index)">二维码图片</button>
                                <img :src="buildFullUrl(item.img)" alt="" >
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">下载二维码设置</label>
                <div class="layui-clear">
                    <div class="left">

                        <label class="layui-form-label">安卓</label>
                        <div class="layui-input-block layui-clear" style="height: 200px;">
                            <button class="layui-btn layui-btn-primary" v-on:click="androidQr()">点击上传</button>
                            <br>
                            <img :src="androidQrPath?buildFullUrl(androidQrPath):null" alt="" style="width:170px;height:170px;margin-top:5px;">
                        </div>
                    </div>
                    <div class="left">
                        <label class="layui-form-label">IOS</label>
                        <div class="layui-input-block layui-clear" style="height: 200px;">
                            <button class="layui-btn layui-btn-primary" v-on:click="iosQr()">点击上传</button>
                            <br>
                            <img :src="iosQrPath?buildFullUrl(iosQrPath):null" alt="" style="width:170px;height:170px;margin-top:5px;">
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<style>

    .img-box .img{
        width:100%;max-width: 100%;
    }
    .lunbo1-list .item {
        margin-top: 10px;
        border: 1px solid #e0e0e0;
        padding: 20px;
        width: 224px;height: 180px;
        position: relative;
        float: left;
        margin-left: 10px;
        overflow: hidden;
    }
    .lunbo1-list .item img{
        margin-top:10px;
        width: 150px;
        max-height: 150px;
    }
    .lunbo1-list .item .layui-input{
        margin-top:10px;
    }
    .lunbo1-list .item .icon{
        position: absolute;top:5px;right:5px;
        z-index:1;color:red;font-size:20px;
    }

    .lunbo2-list .item {
        margin-top: 10px;
        border: 1px solid #e0e0e0;
        padding: 20px;
        width: 310px;height: 180px;
        position: relative;
        float: left;
        margin-left: 10px;
        overflow: hidden;
    }
    .lunbo2-list .item img{
        margin-top:10px;
        width: 150px;
        height: 86px;
    }
    .lunbo2-list .item .layui-input{
        margin-top:10px;
    }
    .lunbo2-list .item .icon{
        position: absolute;top:5px;right:5px;
        z-index:1;color:red;font-size:20px;
    }
    .four-btns .item{
        margin-top: 10px;
        border: 1px solid #e0e0e0;
        padding: 20px;
        width: 265px;
        position: relative;
        float: left;
        margin-left: 10px;
        overflow: hidden;
    }
    .four-btns .item .img-box{
        width: 100px;margin-top:10px;
    }
    .four-btns .item .img-box{
        max-width: 100px;min-height: 50px;
    }
    .block-bottom{
        margin-top:10px;
    }
    .block-bottom .item{
        width:210px;height: 270px;
        padding: 20px;
        border: 1px solid #e0e0e0;
        position: relative;
        margin-left:10px;
        overflow: hidden;
    }
    .block-bottom .item .image{

    }
    .block-bottom .item .image img{
        max-width: 100%;display: block;margin: 5px 0 0 5px;
    }
    .block-bottom .item .del{
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 1;
        color: red;
        font-size: 20px;
    }
</style>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'layedit', 'laydate','jquery','upload'], function () {
        var form = layui.form
            ,$ = layui.jquery
            , layer = layui.layer
            ,upload = layui.upload;

        new Vue({
            el:'#app',
            data:{
                wapTopBanner:null,
                wapBackground:null,
                settings:[],
                screenShow:false,
                wapScreenImages:[],
                wapQrcodeBg:null,
                wapQrCodes:[],
                androidQrPath: null,
                iosQrPath: null,
            },
            methods:{
                upload(params,callback){ //重新封装的上传方法
                    var id = generateId()
                    var elem  = "#"+id;
                    $('body').append('<button style="display: none;" id="'+id+'">按钮</button>');
                    upload.render({
                        elem: elem,
                        url:"/admin/upload/upload",
                        done:function(res){
                            callback(res,params);
                        }
                    });
                    $("#"+id).click();
                    $(elem).remove();
                },
                getValByName:function(key){
                    for(var k in this.settings){
                        var row = this.settings[k];
                        if(row.name === key){
                            return row.val
                        }
                    }
                    return null;
                },
                buildFullUrl:function(relativePath){
                    if (!relativePath) return null;
                    return '/' + relativePath;
                },
                setNameVal:function(e,name){
                    var val = e.target.value;
                    settingSetVal(name,val,function(){
                        layer.msg('设置成功',{icon:6,time:500})
                    })
                },
                lunbo1Add:function(){
                    var Id = generateId();
                    this.wapScreenImages.push({
                        id:Id,
                        src:""
                    })
                },
                lunbo1Upload:function(index){
                    var _this = this;
                    this.upload({index:index},function(res){
                        _this.wapScreenImages[index].src = res.data.path;
                    })
                },

                lunbo1Save:function () {
                    var arr = this.wapScreenImages;
                    for(let k in arr){
                        delete arr[k].id
                    }
                    settingSetVal('wapScreenImages',JSON.stringify(arr),function(res){
                        if (res.code === 0){
                            layer.msg('保存成功',{icon:1})
                        }
                    });
                },

                qrCodesAdd:function(){
                    this.wapQrCodes.push({
                        title:"",
                        img:"",
                    });

                },
                uploadQrImg:function (index) {
                    var _this = this;
                    _this.upload({index:index},function(res){
                        _this.wapQrCodes[index].img = res.data.path;
                    })
                },
                wapQrCodeSave:function(){
                    settingSetVal('wapQrCodes',JSON.stringify(this.wapQrCodes),function(res){
                        if (res.code ===0) {
                            layer.msg('保存成功',{icon:1})
                        }
                    });
                },
                androidQr:function(){
                    var _this = this;
                    _this.upload({},function(res){
                        _this.androidQrPath = res.data.path;
                        settingSetVal('android-qr',_this.androidQrPath,function(res){
                            if (res.code ===0) {
                                layer.msg('保存成功',{icon:1})
                            }
                        });
                    })
                },
                iosQr:function(){
                    var _this = this;
                    _this.upload({},function(res){
                        _this.iosQrPath = res.data.path;
                        settingSetVal('ios-qr',_this.iosQrPath,function(res){
                            if (res.code ===0) {
                                layer.msg('保存成功',{icon:1})
                            }
                        });
                    })
                }
            },
            updated:function(){
                form.render();
            },
            mounted:function(){
                var _this = this;

                upload.render({
                    elem: '#upload-qr-bg',
                    acceptMime:"image/*",
                    url:"/admin/upload/upload",
                    done:function(res){
                        if (res.code === 0){
                            var relativePath = res.data.path;
                            _this.wapQrcodeBg = _this.buildFullUrl(relativePath);
                            console.log(_this.wapQrcodeBg)
                            settingSetVal('wapQrcodeBg',relativePath,function(){
                                layer.msg('设置成功',{icon:6,time:500})
                            })
                        }
                    }
                });

                $.get('/admin/webManage/settings',{},function(res){
                    var settings = res.data;

                    _this.settings = settings;

                    _this.wapTopBanner = _this.getValByName('wapTopBanner');
                    _this.wapBackground = _this.getValByName('wapBackground');

                    _this.wapScreenImages =  JSON.parse(_this.getValByName('wapScreenImages'));

                    _this.wapQrcodeBg = _this.buildFullUrl(_this.getValByName('wapQrcodeBg'));

                    _this.wapQrCodes = JSON.parse(_this.getValByName('wapQrCodes'));
                    _this.androidQrPath = _this.getValByName("android-qr")
                    _this.iosQrPath = _this.getValByName("ios-qr")

                })
            }
        })
    });
</script>
</body>
</html>